<template>
  <div class="side">
    <el-menu
      :default-active="curRoute"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router
      :default-openeds="openArr"
      active-text-color="#ffffff"
    >
      <div v-for="(item, index) in menus" :key="index">
        <el-menu-item :index="item.path" :route="item.path">
          <div class="side-box">
            <i :class="item.icon" style="color: #ffffff"></i>
            <span>{{ item.name }}</span>
          </div>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          id: 0,
          permission: null,
          name: "首页",
          path: "",
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
        {
          id: 1,
          permission: null,
          name: "产品管理",
          path: null,
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
        {
          id: 2,
          permission: null,
          name: "产品分类管理",
          path: null,
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
        {
          id: 3,
          permission: null,
          name: "合作商管理",
          path: null,
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
        {
          id: 4,
          permission: null,
          name: "代理商管理",
          path: null,
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
        {
          id: 5,
          permission: null,
          name: "员工管理",
          path: null,
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
        {
          id: 6,
          permission: null,
          name: "医院管理",
          path: null,
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
        {
          id: 7,
          permission: null,
          name: "系统设置",
          path: null,
          icon: "iconfont icondianpu",
          type: 0,
          childrenList: [],
        },
      ], // 菜单
      openArr: [],
    };
  },
  computed: {
    curRoute() {
      return this.$route.path;
    },
  },
  created() {},
  methods: {
    // handleOpen(key, keyPath) {
    //     // console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //     // console.log(key, keyPath);
    // }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";
/deep/ .menu-items {
  position: relative;
}
.side {
  position: absolute;
  top: 100px;
  left: 0;
  width: 120px;
  background-color: $colorPrimary;
  height: calc(100% - 100px);
  box-sizing: border-box;
  overflow-y: none;
  li {
    padding-left: 0 !important;
  }
}
.side-box {
  width: 120px;
  height: 70px;
  line-height: 20px;
  font-size: 14px;
  color: $colorPrimary;
  background-color: #333333;
  @include flex-column-center-box;
}

@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/t/font_1338484_z6idhqcsm59.eot?t=1571123687796"); /* IE9 */
  src: url("//at.alicdn.com/t/font_1338484_z6idhqcsm59.eot?t=1571123687796#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("data:application/x-font-woff2;charset=utf-8;base64,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")
      format("woff2"),
    url("//at.alicdn.com/t/font_1338484_z6idhqcsm59.woff?t=1571123687796")
      format("woff"),
    url("//at.alicdn.com/t/font_1338484_z6idhqcsm59.ttf?t=1571123687796")
      format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url("//at.alicdn.com/t/font_1338484_z6idhqcsm59.svg?t=1571123687796#iconfont")
      format("svg"); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icondianpu:before {
  content: "\e62c";
}
</style>


